<template>
    <el-container>
        <avue-card :option="option" :data="data" @row-click="tip" @row-add="openAdd">
            <template slot="menu" slot-scope="scope">
                <span @click.stop="tip(scope.row, scope.index)">详情</span>
            </template>
        </avue-card>
        <el-drawer title="我是标题" :visible.sync="drawer" :with-header="false">
            <div>
                <el-card class="box-card">
                    <h3>{{ marketInfo.title }}</h3>
                    <p><strong>来源:</strong> {{ marketInfo.origin }}</p>
                    <p><strong>发布时间:</strong> {{ marketInfo.createTime }}</p>
                    <p>{{ marketInfo.text }}</p>
                    <p><strong>创建者ID:</strong> {{ marketInfo.createBy }}</p>
                </el-card>
            </div>
        </el-drawer>



        <el-dialog title="信息共享" :visible.sync="visibleDia" width="30%">
            <el-form :model="form" ref="form" label-width="80px" :inline="false" size="normal">
                <el-form-item label="标题">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <el-form-item label="内容">
                    <el-input v-model="form.content" type="textarea"></el-input>
                </el-form-item>
                <el-form-item label="来源">
                    <el-input v-model="form.origin"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即发布</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>


    </el-container>

</template>
<script>

export default {
    data() {
        return {
            drawer: false,
            visibleDia:false,
            marketInfo: {},
            option: {
                addBtn: true,
                props: {
                    img: 'img',
                    title: 'title',
                    info: 'text',
                    id: 'text'
                }
            },
            data: [{
                id: 1,
                title: 'Alipay',
                text: '在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的,在中台产品的研发过程中，会出现不同的设计规范和实现方式，但其中往往存在很多类似的页面和组件，这些类似的',
                img: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png'
            }],
            form: {}
        }
    },
    created() {
        this.getData();
    },
    methods: {
        tip(row, index) {
            // this.$message.success('查看控制台' + row.id)
            this.drawer = true;
            this.marketInfo = row;
            console.log(row, index)
        },

        openAdd() {
            this.visibleDia=true;
        },

        onSubmit(){
            this.$axios.post("/market-info",this.form).then(
                res=>{
                    if (res.code===200) {
                        this.$message.success('发布ok')
                        this.visibleDia=false;
                        this.getData();
                    }else{
                        this.$message.error(res.msg)
                    }
                }
            )
            },

        getData() {
            this.$axios.get("/market-info/list").then(
                res => {
                    res.forEach(item => {
                        item.img = "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
                        item.text = item.content;  // 新增 text 字段并赋值
                        delete item.content;       // 删除 content 字段
                    });
                    this.data = res;
                }
            )
        }
    }
}

</script>

<style scoped>
.el-container {
    margin: 40px;
}
</style>